<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固小豆个人中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.1.0/dingtalk.open.js"></script>
    <script src='https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug/0.1.3/index.js'></script>
</head>

<body>
     <!-- 加载中遮罩层 -->
    <div id="loading-overlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在登录，请稍候...</div>
    </div>
    <!-- 顶部导航栏 -->
    <div class="header">
        <!-- 添加汉堡菜单按钮 -->
        <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
        <div class="logo">山东固本堂健康产业开发集团股份有限公司</div>
        <div class="nav-links">
            <a href="#" class="active" data-page="home">首页</a>
            <a href="#" data-page="quiz">积分答题</a>
            <a href="#" data-page="rule">积分体系</a>
            <a href="#" data-page="vote">积分投票</a>
            <a href="#" data-page="shop">积分商城</a>
            <a href="#" data-page="profile">个人中心</a>
        </div>
        <!--
		<div class="search-container">
            <input type="text" placeholder="请输入搜索内容">
        </div>
		 -->
        <div class="user-info">
            <div class="avatar"></div>
            <span class="name"></span>
            <div class="user-menu">
                <button class="user-menu-toggle" aria-label="更多">
                    <i class="fas fa-caret-down"></i>
                </button>
                <div class="user-menu-list" id="user-menu-list" style="display:none;">
                    <button class="user-menu-item" id="refresh-cache-menu">清除缓存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 首页 -->
        <div id="home-page" class="page-container active">
            <!-- Banner 宣传区域 -->
            <div class="banner-card section-card">
                <div class="banner-content">
                    <div class="banner-text">
                        <div class="banner-title">积分管理系统</div>
                        <div class="banner-subtitle">高效管理企业积分体系，激励员工积极参与</div>
                        <div class="pain-points">
                            <span class="tag">积分获取途径不清晰</span>
                            <span class="tag">员工参与度不高</span>
                            <span class="tag">积分跟踪管理困难</span>
                        </div>
                        <button id="goto-rules-btn" class="btn btn-primary">了解积分体系规则，提升员工参与度</button>
                    </div>
                </div>
            </div>

            <div class="features-container">
                <!-- 左侧积分管理区 -->
                <div class="integral-section">
                    <div class="section-card">
                        <div class="section-content">
                            <div class="card-title">积分记录</div>
                            <ul class="integral-list" id="integral-record-list">
                                <!-- 由 JS 动态渲染 -->
                            </ul>

                        </div>
                    </div>
                </div>

                <!-- 右侧排行榜区 -->
                <div class="ranking-section">
                    <!-- 个人信息 -->
                    <div class="section-card">
                        <div class="section-content">
                            <div class="card-title">个人积分概览</div>
                            <div class="personal-stats">
                                <div class="personal-stats-item">
                                    <div class="stat-title">本月新增</div>
                                    <div class="stat-value monthPoints"></div>
                                </div>
                                <div class="personal-stats-item">
                                    <div class="stat-title">总积分</div>
                                    <div class="stat-value yearPoints"></div>
                                </div>
                            </div>
                            <div style="margin: 16px 0; height: 1px; background: #f0f0f0;"></div>
                            <!-- 本月排行 -->
                            <div class="card-title">本月排行</div>
                            <ul class="rank-list" id="month-rank-list"></ul>

                            <!-- 本季度排行 -->
                            <div class="card-title">本季度排行</div>
                            <ul class="rank-list" id="quarter-rank-list"></ul>

                            <!-- 本年度排行 -->
                            <div class="card-title">本年度排行</div>
                            <ul class="rank-list" id="year-rank-list"></ul>
                        </div>
                    </div>




                </div>
            </div>
        </div>
        <!-- 积分规则 -->
        <div id="rule-page" class="page-container">
            <h2 class="card-title">固本堂全员积分激励计划</h2>
            <p style="margin-bottom: 24px; color: #595959;">
                <!-- 积分规则 -->
            </p>
            <div class="rule-list" id="rule-item-list">
                <!-- 商品数据由 JS 动态插入 -->
            </div>
        </div>


        <!-- 积分答题页面 -->
        <div id="quiz-page" class="page-container">
            <h2 class="card-title">积分答题</h2>
            <p style="margin-bottom: 24px; color: #595959;">
                参与答题获取积分，每答对一题可获得相应积分，累计积分可兑换丰厚奖励
            </p>

            <div class="quiz-list" id="quiz-item-list">
                <!-- 答题数据由 JS 动态插入 -->
            </div>
        </div>



        <!-- 积分商城页面 -->
        <div id="shop-page" class="page-container">
            <h2 class="card-title">积分商城</h2>
            <p style="margin-bottom: 24px; color: #595959;">
                使用您的积分兑换心仪商品，丰富多样的礼品供您选择
            </p>
            <div class="shop-list" id="shop-item-list">
                <!-- 商品数据由 JS 动态插入 -->
            </div>
        </div>

        <!-- 积分投票页面 -->
        <div id="vote-page" class="page-container">
            <h2 class="card-title">月度之星评选</h2>
            <!-- 期数下拉 -->
            <h2 class="card-title">
                <div class="period-select-box">
                    <label for="periodSelect">期数：</label>
                    <select id="periodSelect"></select>
                </div>
           
            </h2>
            <p id="most"  style="margin-bottom: 12px; font-weight: bold; color: #d46b08; "></p>
            <p id="description" style="margin-bottom: 24px; color: #595959;">
            </p>
              <!-- 投票委员会提示 -->
            <div id="vipNotice" style="margin-bottom: 12px; font-weight: bold; color: #d46b08;"></div>
            <!-- 投票选项容器 -->
            <div id="voteOptions" class="vote-options"></div>

            <!-- 提交按钮 -->
            <button id="voteSubmit" class="btn btn-primary">提交投票</button>
        </div>


        <!-- 个人中心页面 -->
        <div id="profile-page" class="page-container">
            <h2 class="card-title">个人中心</h2>
            <p style="margin-bottom: 24px; color: #595959;">
                查看您的积分记录、兑换情况和账户信息
            </p>

            <div class="profile-stats">
                <div class="profile-stat-item">
                    <div class="profile-stat-value yearPoints"></div>
                    <div class="profile-stat-title">总积分</div>
                </div>
                <div class="profile-stat-item">
                    <div class="profile-stat-value monthPoints"></div>
                    <div class="profile-stat-title">本月新增</div>
                </div>
                <div class="profile-stat-item">
                    <div class="profile-stat-value yearlyRank"></div>
                    <div class="profile-stat-title">当前排名</div>
                </div>
                <div class="profile-stat-item">
                    <div class="profile-stat-value exchangeNumber"></div>
                    <div class="profile-stat-title">兑换记录</div>
                </div>
            </div>

            <div class="tabs-container">
                <div class="tab-buttons">
                    <button class="tab-button active" data-tab="points">积分记录</button>
                    <button class="tab-button" data-tab="exchange">兑换记录</button>
                    <button class="tab-button" data-tab="info">个人信息</button>
                </div>

                <div class="tab-content">
                    <!-- 积分记录 -->
                    <div id="points-tab" class="tab-pane active">
                        <ul class="integral-list" id="points-list"></ul>
                    </div>

                    <!-- 兑换记录 -->
                    <div id="exchange-tab" class="tab-pane" style="display: none;">
                        <ul class="integral-list" id="exchange-list"></ul>
                    </div>

                    <!-- 个人信息 -->
                    <div id="info-tab" class="tab-pane" style="display: none;">
                        <div id="user-info-container"></div>
                    </div>

                    <!-- <div id="points-tab" class="tab-pane active">
                        <ul class="integral-list">
                            <li class="integral-item">
                                <div class="integral-info">
                                    <div class="integral-name">完成保密意识培训</div>
                                    <div class="integral-meta">
                                        <span class="point-type">培训积分</span>
                                        <span class="integral-meta-item">2023-11-08</span>
                                    </div>
                                </div>
                                <div class="integral-stats">
                                    <div class="integral-stats-item point-gain">+50</div>
                                </div>
                            </li>
                            <li class="integral-item">
                                <div class="integral-info">
                                    <div class="integral-name">商务礼仪测评优秀</div>
                                    <div class="integral-meta">
                                        <span class="point-type">测评积分</span>
                                        <span class="integral-meta-item">2023-11-07</span>
                                    </div>
                                </div>
                                <div class="integral-stats">
                                    <div class="integral-stats-item point-gain">+80</div>
                                </div>
                            </li>
                            <li class="integral-item">
                                <div class="integral-info">
                                    <div class="integral-name">团队协作突出贡献</div>
                                    <div class="integral-meta">
                                        <span class="point-type">奖励积分</span>
                                        <span class="integral-meta-item">2023-11-06</span>
                                    </div>
                                </div>
                                <div class="integral-stats">
                                    <div class="integral-stats-item point-gain">+120</div>
                                </div>
                            </li>
                            <li class="integral-item">
                                <div class="integral-info">
                                    <div class="integral-name">兑换咖啡券一张</div>
                                    <div class="integral-meta">
                                        <span class="point-type">消费积分</span>
                                        <span class="integral-meta-item">2023-11-05</span>
                                    </div>
                                </div>
                                <div class="integral-stats">
                                    <div class="integral-stats-item point-loss">-30</div>
                                </div>
                            </li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- 请从后端获取数据动态渲染页面内容 -->
    <script src="script.js">

    </script>
</body>

</html>
